<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>视频播放器</title>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!-- 视频的容器 -->
    <div class="video-container">
        <!-- 视频 -->
        <video src="大王叫我来巡山.mp4" width="100%" height="100%"></video>
        <!-- 进度条 -->
        <div class="progress">
            <div class="progress-line"></div>
            <div class="progress-ball"></div>
        </div>
        <!-- 视频控制栏目 -->
        <div class="bar">
            <div class="pull-left">
                <!-- 播放暂停按钮 -->
                <div class="play pull-left">
                    <i class="iconfont icon-bofang"></i>
                </div>
                <!-- 当前时间：总时间 -->
                <div class="time pull-left">
                    <span class="current">00:00</span> /
                    <span class="total">00:00</span>
                </div>
            </div>
            <div class="pull-right">
                <!-- 快速播放 -->
                <!-- <div class="rate pull-left">
                    <h3>1.0X</h3>
                    <ul>
                        <li>2.0X</li>
                        <li>1.75X</li>
                        <li>1.5X</li>
                        <li>1.25X</li>
                        <li>1.0X</li>
                    </ul>
                </div> -->
                <!-- 音量 -->
                <div class="volume pull-left">
                    <i class="iconfont icon-yinliang3"></i>
                    <div class="volume-control">
                        <div class="volume-line"></div>
                        <div class="volume-ball"></div>
                    </div>
                </div>
                <!-- 全屏和取消全屏 -->
                <div class="fullscreen pull-left">
                    <i class="iconfont icon-quanping"></i>
                </div>
            </div>
        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>